<template>
  <div class="weekDetails_container">
    <!-- <div class="details" v-html="content">{{content}} </div> -->

    <div class="details">
      <pdf ref="pdf" :src="resourcesUrl" class="pdf" @page-loaded="pageNum=$event" :page="pageNum" @progress="loadedRatio = $event" @num-pages="pageTotalNum=$event"></pdf>
    </div>

    <div class="infoTitle">
      <span class="st-icon-pandora">{{ pageNum }} / {{ pageTotalNum }} </span>
      <el-button-group>
        <el-button type="primary" icon="el-icon-arrow-left" size="mini" @click="prePage">上一页</el-button>
        <el-button type="primary" size="mini" @click="nextPage">下一页<i class="el-icon-arrow-right el-icon--right"></i></el-button>
      </el-button-group>
    </div>

    <button class="next" @click="next()">查看下一篇</button>
  </div>
</template>
<style scoped>
.el-button [class*="el-icon-"] + span {
  font-size: 0.1rem;
}
.infoTitle span {
  display: block;
  font-size: 0.1rem;
}
</style>
<script>
import path from '@/network'
import pdf from 'vue-pdf'
import CMapReaderFactory from 'vue-pdf/src/CMapReaderFactory.js'
export default {
  name: 'App',
  components: {
    pdf,
  },
  data () {
    return {
      title: '',
      time: '',
      source: '',
      resourcesUrl: '',
      weekList: [],
      total: 0,
      pagesize: 10,
      currentPage: 1,
      idList: [],
      currentId: this.$route.query.secondId,

      pageNum: 1,
      pageTotalNum: 1, // 总页数
      loadedRatio: 0, //当前页面的加载进度，范围是0-1 ，等于1的时候代表当前页已经完全加载完成了

      loading: false,
    };
  },
  mounted () {
    this.getlawDetails(this.$route.query.secondId);
    this.getSecondType(this.$route.query.firstId);
  },

  methods: {

    prePage () {
      let page = this.pageNum
      page = page > 1 ? page - 1 : this.pageTotalNum
      this.pageNum = page
    },

    // 下一页
    nextPage () {
      let page = this.pageNum
      page = page < this.pageTotalNum ? page + 1 : 1
      this.pageNum = page
    },

    //获取详情
    getlawDetails (id) {
      this.loading = true;
      path.getlawDetails(
        id
      ).then(res => {
        if (res.success === 0) {
          this.title = res.rows.title
          this.time = res.rows.createTime
          this.source = res.rows.profiles
          this.resourcesUrl = res.rows.resourcesUrl
          this.currentId = id
          console.log(id)
          this.resourcesUrl = pdf.createLoadingTask({
            url: this.resourcesUrl,
            cMapUrl: 'https://cdn.jsdelivr.net/npm/pdfjs-dist@2.5.207/cmaps/',
            cMapPacked: true,
            CMapReaderFactory
          });
          this.loading = false;
        }

      })
    },

    //获取二级
    getSecondType (id) {
      path.getSecondType(
        id
      ).then(res => {
        if (res.success === 0) {
          var weekId = res.rows[1].id;
          this.getLawList(weekId)
        }
      })
    },

    //获取list
    getLawList (id) {
      path.getLawList(
        this.currentPage,
        this.pagesize,
        id
      ).then(res => {
        if (res.success === 0) {
          res.rows.forEach(item => {
            this.idList.push(item.id)
          });
        }
      })
    },

    next () {
      this.pageNum = 1,
        this.idList.forEach((item, index) => {
          if (item == this.currentId) {
            if (index < this.idList.length - 1) {
              this.getlawDetails(this.idList[index + 1])
              return false;
            } else {
              this.$message({
                message: '当前是最后一篇！',
                type: 'error'
              });
            }
            return false;
          }
        });

    }
  }
}
</script>